<template>
  <div class="wishlist">
    <WishlistItem v-for="product in wishlistItems" :key="product.id" :product="product" />
  </div>
</template>

<script>
import WishlistItem from './WishlistItem.vue';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'UserWishlist',
  components: {
    WishlistItem
  },
  computed: {
    ...mapState(['wishlistItems'])
  },
  methods: {
    ...mapActions(['removeFromWishlist']),
    removeFromWishlist(productId) {
      this.removeFromWishlist(productId);
      localStorage.setItem('wishlistItems', JSON.stringify(this.wishlistItems));
    }
  }
};
</script>

<style>
.wishlist {
  padding: 20px;
}
</style>